<template>
  <div class="flex flex-row items-center">
    <div class="flex-1" @click="$emit('click', $event)">
      <a-input v-model:value="valueName" class="sl-select-input" v-bind="$attrs" :placeholder="placeholder" readonly>
        <template #suffix>
          <Icon type="icon-you" class="text-color-secondary" />
        </template>
      </a-input>
    </div>
    <div>
      <a-popover trigger="click" :visible="id ? attrVisible : false" placement="left" @visible-change="visibleChange">
        <template #content>
          <a-table size="small" :columns="columns" :data-source="tableData" :loading="tableLoading" :pagination="false">
            <template #bodyCell="{ record, column }">
              <Icon
                v-if="column.dataIndex === 'requires'"
                :type="record.requires ? 'icon-duihao' : 'icon-guanbi'"
                :class="[record.requires ? 'text-color-success' : 'text-color-danger']"
              />
            </template>
          </a-table>
        </template>
        <a-button :disabled="!value" type="link" @click="$emit('check')">查看功能属性</a-button>
      </a-popover>
    </div>
  </div>
</template>
<script lang="ts">
// export default {
//   inheritAttrs: false,
// };
</script>
<script setup lang="ts">
import { SelectProps, TableColumnProps } from "ant-design-vue";
import { Api } from "/@/api/aiot/gateway";
import type { GatewayTypeAttrItem } from "/@/api/aiot/gateway/models";
import { ref, watch } from "vue";
import { useCURD } from "/@/hooks/useCURD";
const props = withDefaults(
  defineProps<{
    id?: string;
    placeholder?: string;
    value?: string;
  }>(),
  {
    placeholder: "请输入",
  }
);
defineEmits(["click", "check"]);

const valueName = ref<string>();
watch(
  () => props.value,
  (v) => {
    valueName.value = v;
  },
  {
    immediate: true,
  }
);
const attrVisible = ref(false);
let lastValue: string | null = null;
function visibleChange(v) {
  // if (!props.value) return;
  // attrVisible.value = v;
  // if (lastValue === null || props.value !== lastValue) {
  //   lastValue = props.value as string;
  //   reloadTable({ model: { gatewayTypeId: lastValue } });
  // }
}

const columns = ref<TableColumnProps<GatewayTypeAttrItem>[]>([
  { title: "属性名称", dataIndex: "datapointAttrName" },
  { title: "是否必填", dataIndex: "requires", align: "center" },
]);
const { tableData, tableLoading, reloadTable } = useCURD<GatewayTypeAttrItem>({
  getPageUrl: Api.getGatewayTypeAttrs,
  loadOnMounted: false,
  pageSize: 999,
  loadFilter(data) {
    data.sort((a, b) => {
      return a.datapointAttrNumber - b.datapointAttrNumber;
    });
    return data;
  },
});
</script>
